<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>换肤demo</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link title="default" rel="stylesheet" href="css/default.css">
  <link title="blue" rel="stylesheet" href="css/blue.css" disabled="disabled">
  <link title="red" rel="stylesheet" href="css/red.css" disabled="disabled">
  <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="jumbotron">
          <h1>换肤Demo</h1>
          <p class="btnlist">
            <a class="btn btn-default btn-lg" id="default" href="#" role="button">默认皮肤</a>
            <a class="btn btn-default btn-lg" id="blue" href="#" role="button">蓝色皮肤</a>
            <a class="btn btn-default btn-lg" id="red" href="#" role="button">红色皮肤</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  $(function () {
    var cookie_style = $.cookie("mystyle");//获取cookie值
    if (cookie_style == null) {//如果没有cookie值 选中默认皮肤
      console.log("cookie空");
      $("link[title][title='default']").removeAttr("disabled");
      $(".btnlist #default").addClass("active");
    } else {
      console.log("cookie不为空");
      console.log(cookie_style);
      //有cookie值 设置上次记录的皮肤
      $("link[title][title='" + cookie_style + "']").removeAttr("disabled");//选中皮肤
      $(".btnlist a[id='" + cookie_style + "']").addClass("active");//增加按钮选中状态
      $("link[title][title!='" + cookie_style + "']").attr("disabled", "disabled");//移除其他皮肤
    }

    var cookietime = new Date();
    cookietime.setTime(cookietime.getTime() + (60 * 60 * 1000)); //coockie保存一小时

    //换肤按钮点击事件
    $(".btnlist a").click(function () {
      var style = $(this).attr("id"); //设置cookie为按钮ID值
      $("link[title][title='" + style + "']").removeAttr("disabled"); //当前点击的换肤按钮激活 更换样式
      $("link[title][title!='" + style + "']").attr("disabled", "disabled"); //移除其他皮肤样式
      //设置cookie 参数说明："mystyle" cookie名称、 style：cookie值 expires：cookie有效时间
      $.cookie("mystyle", style, {
        expires: cookietime
      });
      $(this).addClass("active").siblings().removeClass("active");//添加按钮选中状态 移除其他按钮选中状态
    })

  })

  // 其他说明
  /*
  JQ选择器
 $("link[title][title='" + style + "']")表示选中link标签 带有title属性 且title值为 'style'的元素

 id值和link的title值要相同，确保与cookie对应
 公共的样式文件不加title属性，这样可以避免被disabled掉
 */
</script>

</html>